import React, { useState, useEffect } from "react";
import PieChartIcon from "./PieChartIcon";

export interface Props {
    width: number;
    height: number;
    period: number;

    color?: string;
    backgroundColor?: string;
}

export default function (props: Props) {
    const radius = 31.6;
    const [timeProgress, setTimeProgress] = useState(0);

    useEffect(() => {
        // Get the current number of seconds to initialize timer.
        const initialValue = (new Date().getTime() / 1000) % props.period / props.period * radius;
        setTimeProgress(initialValue);

        const interval = setInterval(() => {
            const value = (new Date().getTime() / 1000) % props.period / props.period * radius;
            setTimeProgress(value);
        }, 100);
        return () => clearInterval(interval);
    }, [props]);

    return (
        <PieChartIcon width={props.width} height={props.height}
            progress={timeProgress} maxProgress={radius}
            backgroundColor={props.backgroundColor} color={props.color} />
    )
}

